<template>
<div class="app-container">
  <div class="filter-container">
    <el-select v-model="dno" placeholder="选择所属部门" size="medium">
      <el-option
        v-for="item in depts"
        :key="item.id"
        :label="item.label"
        :value="item.id">
      </el-option>
    </el-select>

    <el-button style="margin-left: 10px;" type="danger"
      size="medium"
      icon="el-icon-delete" @click="handleCreate">
      批量删除
    </el-button>
    <el-button style="margin-left: 10px;" type="primary"
      size="medium"
      icon="el-icon-edit" @click="handleCreate">
      添加员工
    </el-button>
  </div>

  <el-table
    v-loading="listLoading"
    :data="employees"
    border
    fit
    highlight-current-row>
    <el-table-column type="selection" width="55">
    </el-table-column>

    <el-table-column label="姓名" align="center" width="100">
      <template slot-scope="scope">
        <span>{{ scope.row.ename }}</span>
      </template>
    </el-table-column>

    <el-table-column label="生日" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.ebirth | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
      </template>
    </el-table-column>

    <el-table-column label="性别" align="center" width="80px">
      <template slot-scope="scope">
        <span><svg-icon :icon-class="scope.row.esex == 2 ? 'girl' : 'boy'"></svg-icon></span>
      </template>
    </el-table-column>

    <el-table-column label="家庭地址">
      <template slot-scope="scope">
        <span>{{ scope.row.address }}</span>
      </template>
    </el-table-column>

    <el-table-column label="毕业学校" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.school }}</span>
      </template>
    </el-table-column>

    <el-table-column label="专业" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.major }}</span>
      </template>
    </el-table-column>

    <el-table-column label="工号" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.idcard }}</span>
      </template>
    </el-table-column>
    
    <el-table-column label="民族" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.nation }}</span>
      </template>
    </el-table-column>

      <el-table-column label="电话" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.phone }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button size="mini" type="primary"
          @click="handleViewDetails(scope.row)">详情
        </el-button>

        <el-button size="mini" type="success"
          @click="handleEdit(scope.row.eno)">编辑
        </el-button>

        <el-button size="mini" type="danger"
          @click="handleDelete(scope.row.eno)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="margin-top:10px;"
    :current-page="listQuery.page"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="listQuery.size"
    :total="total"
    background
    layout="total, sizes, prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <el-dialog :visible.sync="isDetailsVisible" title="员工详情">
    <el-row class="row">
      <el-col :span="6"><span>员工姓名：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.ename }}</span></el-col>
      <el-col :span="6"><span>员工性别：</span></el-col>
      <el-col :span="6"><span><svg-icon :icon-class="employeeDetails.esex == 2 ? 'girl' : 'boy'"></svg-icon></span></el-col>
    </el-row>

    <el-row class="row">
      <el-col :span="6"><span>员工生日：</span></el-col>
      <el-col :span="6"><span>{{employeeDetails.ebirth | parseTime('{y}-{m}-{d} {h}:{i}') }}</span></el-col>
      <el-col :span="6"><span>员工工号：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.idcard }}</span></el-col>
    </el-row>

    <el-row class="row">
      <el-col :span="6"><span>邮箱：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.email }}</span></el-col>
      <el-col :span="6"><span>毕业学校：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.school }}</span></el-col>
    </el-row>

    <el-row class="row">
      <el-col :span="6"><span>工资：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.esalary }}</span></el-col>
      <el-col :span="6"><span>所属部门：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.dno }}</span></el-col>
    </el-row>

    <el-row class="row">
      <el-col :span="6"><span>政治面貌：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.political }}</span></el-col>
      <el-col :span="6"><span>婚姻状况：</span></el-col>
      <el-col :span="6"><span>{{ employeeDetails.marriage }}</span></el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="isDetailsVisible = false">确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { fetchList, deleteEmployees } from '@/api/employees'
export default {
  data() {
    return {
      dno: null,
      depts: [
        {id: 1, label: "开发部"},
        {id: 2, label: "测试部"},
        {id: 3, label: "产品部"},
        {id: 4, label: "销售部"}
      ],

      listQuery: {
        page: 1,
        size: 20
      },
      total: 138,

      isDetailsVisible: false,

      employees: [],

      employeeDetails: {

      }
    }
  },

  mounted() {
    // 页面启动时获取员工列表
    this.fetchTableData()
  },

  methods: {
    fetchTableData() {
      fetchList(this.listQuery).then((response) => {
        this.employees = response.data
      })
    },

    handleCreate() {
      this.$router.push('./edit')
    },

    handleDepChange(value) {
      // console.log(value);
    },

    handleEdit(eno) {
      this.$router.push({
        name: "employeesEdit",
        params: {
          id: eno
        }
      });
    },

    handleDelete(eno) {
      this.$confirm('确定要删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEmployees(eno).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });

          // 刷新列表数据
          this.fetchTableData();
        });
      });
    },

    handleViewDetails(employee) {
      this.isDetailsVisible = true;
      this.employeeDetails = employee;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.row div:nth-child(odd) {
  text-align: right;
  padding-right: 1rem;
  span {
    font-weight: bold;
  }
}
</style>
